<template>
  <a-modal title-align="start" v-model:visible="visible" @close='handleCancel(formRef)'>
    <template #title>{{ addChildren ? '创建子部门' : '创建' }}</template>
    <a-form ref="formRef" :model="formData">
      <a-form-item
        field="name"
        label="部门"
        label-col-flex="40px"
        :rules="[
          { required: true, message: 'name is required' },
        ]"
        :validate-trigger="['change', 'input']"
      >
        <a-input
          v-model="formData.name"
          placeholder="请输入部门"
        />
      </a-form-item>
      <a-form-item
        field="description"
        label="描述"
        label-col-flex="40px"
      >
      <a-textarea placeholder="描述内容"  v-model="formData.description" allow-clear/>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="visible= false">取消</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { login } from '@/api/user';
import { ref, defineEmits,reactive } from 'vue';
const formRef = ref<any>(null)
const formData = reactive<any>({
   name: '',
   parent:null,
   description: '',
});
const visible = ref(false);
const addChildren = ref(false);
const handleClick = (val: any,isChild:boolean) => {
  visible.value = true;
  addChildren.value = isChild
  if (isChild) formData.parent = val?.id
};
const emits = defineEmits(['submitFrom']);
const handleOk = async() => {
   const res = await formRef.value?.validate()
  if(!res){
    emits('submitFrom', formData );
  }
};
const handleCancel = (formEl:any) => {
  addChildren.value = false
  formEl.resetFields()
};
defineExpose({ handleClick,visible })
</script>

<style scoped lang="less">
.title_style {
  color: #ff7d00;
}
</style>
